import React, { useEffect, useState } from 'react';

import { TRDefault } from '@/components/index.js';
import { TjSegmented, TjChart, TjTitle } from '@/pages/ETrade/components';
import { getCssVariableValue } from '@/utils/utils';
import { useThemeChange } from '@/hooks';

export const baseOption = () => {
  return {
    grid: [
      { left: 48, right: 48, top: 24, height: '40%' },
      { left: 48, right: 48, top: '60%', height: '20%' },
    ],
    axisPointer: {},
    legend: {
      textStyle: {
        color: getCssVariableValue('--chart-legend-color'),
      },
      pageIconColor: getCssVariableValue('--bd-primary'),
      pageTextStyle: {
        color: getCssVariableValue('--chart-legend-color'),
      },
    },
    tooltip: {},
    dataZoom: {
      type: 'slider',
      start: 0,
      end: 100,
      left: 40,
      right: 10,
      bottom: 20,
      height: 20,
      show: true,
      backgroundColor: getCssVariableValue('--bg-form'),
      dataBackground: {
        dataBackground: {
          areaStyle: { opacity: 0 },
          lineStyle: { opacity: 0 },
        },
      },
      selectedDataBackground: {
        areaStyle: {
          color: getCssVariableValue('--font-primary'),
          opacity: 0.15,
        },
        lineStyle: { color: 'transparent' },
      },
      borderColor: 'transparent',
      handleStyle: {
        color: getCssVariableValue('--bg-form'),
        borderColor: getCssVariableValue('--bd'),
      },
      brushSelect: false,
      showDetail: false,
    },
    xAxis: [
      {
        type: 'category',
        gridIndex: 0,
        formatter: (v) => v.slice(4),
        axisLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisTick: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            type: 'solid',
            color: getCssVariableValue('--chart-x-line'),
          },
        },
      },
      {
        type: 'category',
        gridIndex: 1,
        axisLabel: { show: false, color: getCssVariableValue('--chart-font-color') },
        axisTick: { show: false, color: getCssVariableValue('--chart-x-line') },
        axisLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            type: 'solid',
            color: getCssVariableValue('--chart-x-line'),
          },
        },
      },
    ],
  };
};
export const perY = {
  type: 'value',
  min: 0,
  max: 100,
  formatter: (v) => `${v}%`,
};
export const Chart1 = ({ data = [] }) => {
  // 实时-日前出清价差预测
  const dataOptions = [
    {
      value: 0,
      label: '修正前',
      dimensions: [
        'id',
        'dayAheadClearPrice',
        'dayAheadPriceForecast',
        'realtimeClearPrice',
        'realtimePriceForecast',
        'clearDifferencePrice',
        'priceDifferenceForecast',
        'priceDifferenceConfidence',
      ],
    },
    {
      value: 1,
      label: '修正后',
      dimensions: [
        'id',
        'revisedDayAheadClearPrice',
        'revisedDayAheadPriceForecast',
        'revisedRealtimeClearPrice',
        'revisedRealtimePriceForecast',
        'revisedClearDifferencePrice',
        'revisedPriceDifferenceForecast',
        'priceDifferenceConfidence',
      ],
    },
  ];
  const [temp, setTemp] = useState(dataOptions[1]);
  const [chartData, setChartData] = useState({});
  const { theme } = useThemeChange();

  const getOption = () => {
    return {
      ...baseOption(),
      dataset: {
        source: data,
        dimensions: temp.dimensions,
      },
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          name: '元/kWh',
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        {
          type: 'value',
          gridIndex: 1,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        {
          ...perY,
          name: '置信度',
          gridIndex: 1,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
      ],
      series: [
        {
          type: 'line',
          name: '现货日前出清价',
          color: '#5E92F6',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'dashed',
          name: '现货日前出清价预测',
          color: '#5E92F6',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'line',
          name: '现货实时出清价',
          color: '#E86452',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'dashed',
          name: '现货实时出清价预测',
          color: '#E86452',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'line',
          name: '现货出清价差',
          color: '#F5BE15',
          props: { xAxisIndex: 1, yAxisIndex: 1 },
        },
        {
          type: 'dashed',
          name: '现货出清价差预测',
          color: '#F5BE15',
          props: { xAxisIndex: 1, yAxisIndex: 1 },
        },
        {
          type: 'bar',
          name: '价差置信度',
          color: '#64779B',
          props: { xAxisIndex: 1, yAxisIndex: 2 },
        },
      ],
    };
  };

  useEffect(() => {
    setChartData(getOption(data));
  }, [data]);

  useEffect(() => {
    setTimeout(() => {
      setChartData(getOption(data));
    }, 1);
  }, [theme]);
  return (
    <div>
      <TjTitle
        title="实时-日前出清价差预测"
        tooltip="天机基于数据研判与AI模型，对未来短期现货价差出具预测结果，并依据各省的出清价格修正规则对价格进行修正。注意，如价差成因多为调度行为引起或市场数据披露不全，预测结果可信度会降低，请用户知悉。"
        right={
          <TjSegmented
            value={temp.value}
            options={dataOptions}
            onChange={(v, opt) => setTemp(opt)}
          />
        }
      />
      <div style={{ height: 426 }}>
        {!!data?.length ? <TjChart option={chartData} group="A" /> : <TRDefault type="emptysm" />}
      </div>
    </div>
  );
};

export const Chart2 = ({ data = [] }) => {
  // 实时出清-日前过渡价差预测
  const dataOptions = [
    {
      value: 0,
      label: '修正前',
      dimensions: [
        'id',
        'dayAheadTransition',
        'dayAheadTransitionForecast',
        'realtimeLineTransitionClear',
        'realtimeLineTransitionClearForecast',
        'baseRatio',
        'baseRatioForecast',
        'dayAheadTransitionPriceDifference',
        'dayAheadTransitionPriceDifferenceForecast',
        'differencePriceConfidenceTransition',
      ],
    },
    {
      value: 1,
      label: '修正后',
      dimensions: [
        'id',
        'revisedDayAheadTransition',
        'revisedDayAheadTransitionForecast',
        'revisedRealtimeLineTransitionClear',
        'revisedRealtimeLineTransitionClearForecast',
        'baseRatio',
        'baseRatioForecast',
        'revisedDayAheadTransitionPriceDifference',
        'revisedDayAheadTransitionPriceDifferenceForecast',
        'differencePriceConfidenceTransition',
      ],
    },
  ];
  const [temp, setTemp] = useState(dataOptions[1]);
  const { theme } = useThemeChange();
  const [chartData, setChartData] = useState({});

  const getOption = () => {
    return {
      ...baseOption(),
      dataset: {
        source: data,
        dimensions: temp.dimensions,
      },
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          name: '元/kWh',
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        {
          ...perY,
          gridIndex: 0,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        {
          type: 'value',
          gridIndex: 1,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        {
          ...perY,
          name: '置信度',
          gridIndex: 1,
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
      ],
      series: [
        {
          type: 'line',
          name: '现货日前过渡价',
          color: '#5E92F6',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'dashed',
          name: '现货日前过渡价预测',
          color: '#5E92F6',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'line',
          name: '现货实时出清价',
          color: '#E86452',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'dashed',
          name: '现货实时出清价预测',
          color: '#E86452',
          props: { xAxisIndex: 0, yAxisIndex: 0 },
        },
        {
          type: 'line',
          name: '基数比例',
          color: '#67DCAB',
          props: { xAxisIndex: 0, yAxisIndex: 1 },
        },
        {
          type: 'dashed',
          name: '基数比例预测',
          color: '#67DCAB',
          props: { xAxisIndex: 0, yAxisIndex: 1 },
        },
        {
          type: 'line',
          name: '现货日前过渡实时价差',
          color: '#F5BE15',
          props: { xAxisIndex: 1, yAxisIndex: 2 },
        },
        {
          type: 'dashed',
          name: '现货日前过渡实时价差预测',
          color: '#F5BE15',
          props: { xAxisIndex: 1, yAxisIndex: 2 },
        },
        {
          type: 'bar',
          name: '价差置信度',
          color: '#64779B',
          props: { xAxisIndex: 1, yAxisIndex: 3 },
        },
      ],
    };
  };

  useEffect(() => {
    setChartData(getOption(data));
  }, [data]);

  useEffect(() => {
    setTimeout(() => {
      setChartData(getOption(data));
    }, 1);
  }, [theme]);

  return (
    <div>
      <TjTitle
        title="实时出清-日前过渡价差预测"
        tooltip="天机基于数据研判与AI模型，对未来短期现货实时出清与日前过渡价差进行预测，并依据各省的出清价格修正规则对价格进行修正。注意，调度行为、市场数据披露不全等原因均会降低预测准确度，结果仅供参考，请用户知悉。"
        right={
          <TjSegmented
            value={temp.value}
            options={dataOptions}
            onChange={(v, opt) => setTemp(opt)}
          />
        }
      />
      <div style={{ height: 426 }}>
        {!!data?.length ? <TjChart option={chartData} group="A" /> : <TRDefault type="emptysm" />}
      </div>
    </div>
  );
};
